<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="../../libs/js/graphical/popup.js" type="text/javascript"></script>
		<script src="js/chart.js" type="text/javascript"></script>
		<script src="js/progress.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<style type="text/css">
			body {
				background: #F4F4F4;
			}
			#holder{
				float: left;
				width: 640px;
			}
			#holder0 {
				position: relative;
				width: 220px;
				height: 240px;
				/*margin: 10px auto;*/
				float: left;
			}
			#holder2 {
				position: relative;
				width: 640px;
				height: 240px;
				/*margin: 10px auto;*/
				float: left;
			}
			#holder2 p span{
				display: inline-block;
				font-size: 24px;
				color: #7D91A3;
			}
			#holder2>div{
				line-height: 40px;
			}
			.ring_text2 {
				position: absolute;
				top: 110px;
				left: 0px;
				font-size: 14px;
				width: 160px;
				text-align: center;
			}
			
			
			.ring_text5 {
				position: absolute;
				top: 110px;
				left: 160px;
				font-size: 14px;
				width: 160px;
				text-align: center;
			}
			
			
			
			
			.ring_text8 {
				position: absolute;
				top: 110px;
				left: 320px;
				font-size: 14px;
				width: 160px;
				text-align: center;
			}
			
			.ring_text9 {
				position: absolute;
				top: 110px;
				left: 480px;
				font-size: 14px;
				width: 160px;
				text-align: center;
			}
			
			#holder1 {
				position: relative;
				width: 220px;
				height: 240px;
				/*margin: 10px auto;*/
				float: left;
			}
			
			.rect_text1 {
				position: absolute;
				top: 65px;
				left: 30px;
			}
			
			
			.rect_text3 {
				position: absolute;
				top: 105px;
				left: 30px;
			}
			
			
			.rect_text5 {
				position: absolute;
				top: 145px;
				left: 30px;
			}
			.rect_text6 {
				position: absolute;
				top: 185px;
				left: 30px;
			}
		</style>
	</head>

	<body>
		<div class="Content_win">
			<div class="content_left">
				<ul>
					<li class="user_title">
						<div class="left">
							<img src="style/head_icon.png" />
						</div>
						<div class="right">
							<p>小哥，下午好！起来运动一下</p>
							<p>今天是 星期一，2016年4月10日</p>
						</div>
						<div class="bottom" style="background: #3277DF;">
							<span style="margin-left: 60px;"><i class="user_set"></i>设置个人信息</span>
							<span><i class="user_switch"></i>切换用户</span>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="style/content_left01.png" />
						</div>
						<div class="right"><span>16</span></div>
						<div class="bottom" style="background: #F54141;">待办<b></b></div>
					</li>
					<li style="background: #FFD02B;">
						<div class="left">
							<img src="style/content_left02.png" />
						</div>
						<div class="right"><span>48</span></div>
						<div class="bottom" style="background: #EDC127;">通知<b></b></div>
					</li>
					<li style="margin: 0;background: #79C447;">
						<div class="left">
							<img src="style/content_left03.png" />
						</div>
						<div class="right"><span>14</span></div>
						<div class="bottom" style="background: #6EBA3C;">公告<b></b></div>
					</li>
					<div class="clear"></div>
				</ul>

				<!--对比分析-->
				<div class="Contrast_win">
					<div class="title">
						<i></i>资金计划执行对比分析
					</div>
					<div id="holder0">
						<div class="rect_text1">申请金额</div>
						<div class="rect_text3">核实金额</div>
					</div>
					<div id="holder"></div>
				</div>
				<!--客户分析-->
				<div class="Contrast_win">
					<div class="title">
						<i></i>客户分析
					</div>
					<div class="">
						<div id="holder1">
							<div class="rect_text1">无意向</div>
							<div class="rect_text3">一般意向</div>
							<div class="rect_text5">高意向</div>
							<div class="rect_text6">必买意向</div>
						</div>

						<div id="holder2">
							<div class="ring_text2"><p><span>14.0</span> %</p>152人</div>

							<div class="ring_text5"><p><span>25.4</span> %</p>152人</div>

							<div class="ring_text8"><p><span>20.6</span> %</p>152人</div>
							
							<div class="ring_text9"><p><span>9.0</span> %</p>152人</div>
							
						</div>
					</div>
				</div>

			</div>
			<div class="content_right">
				<div class="title">
					<i></i>最新消息
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
				<div class="list_content">
					<p>流程 &lt; 周振涛报销申请单 &gt;</p>
					<span>发送人：欧阳晓晓 | 2014-07-29</span>
				</div>
			</div>
			<div class="clear"></div>
		</div>

		<script type="text/javascript">
			function showToast1(text) {
				top.Toast('showNoticeToast', text);
			}

			var paramBg1 = {
				stroke: "#ebf1f7",
				"stroke-width": 8
			};
			var paramBlue1 = {
				stroke: "#00aaef",
				"stroke-width": 8
			};
			var paramGreen1 = {
				stroke: "#1fc695",
				"stroke-width": 8
			};
			var paramYellow1 = {
				stroke: "#ff9900",
				"stroke-width": 8
			};
			var paramPink1 = {
				stroke: "#FE8A73",
				"stroke-width": 8
			};
			
			var radius = 65;
			var paramBg2 = {
				stroke: "#ebf1f7",
				"stroke-width": 5
			};
			var paramBlue2 = {
				stroke: "#00aaef",
				"stroke-width": 5,
				"stroke-linecap": "round"
			};
			var paramGreen2 = {
				stroke: "#1fc695",
				"stroke-width": 5,
				"stroke-linecap": "round"
			};
			var paramYellow2 = {
				stroke: "#ff9900",
				"stroke-width": 5,
				"stroke-linecap": "round"
			};
			var paramPink2 = {
				stroke: "#FE8A73",
				"stroke-width": 5,
				"stroke-linecap": "round"
			};
			$(function() {
				var rectWidth = 20;
				var paper1 = initPaper("holder1", 220, 260);
				var paper0 = initPaper("holder0", 220, 240);
				drawRectProgress(paper0, 100, 0, 100, 130, 80, rectWidth, paramBlue1, paramBg1);
				drawRectProgress(paper0, 100, 0, 100, 130, 120, rectWidth, paramGreen1, paramBg1);
				
				drawRectProgress(paper1, 100, 0, 100, 130, 80, rectWidth, paramBlue1, paramBg1);
				drawRectProgress(paper1, 100, 0, 100, 130, 120, rectWidth, paramGreen1, paramBg1);
				drawRectProgress(paper1, 100, 0, 100, 130, 160, rectWidth, paramYellow1, paramBg1);
				drawRectProgress(paper1, 100, 0, 100, 130, 200, rectWidth, paramPink1, paramBg1);

				var paper2 = initPaper("holder2", 640, 240);
				//paper,current,min,max,cx,cy,radius,param,paramBg
				drawRingProgress(paper2, 14.0, 0, 100, 80, 150, radius, paramBlue2, paramBg2);
				drawRingProgress(paper2, 25.4, 0, 100, 240, 150, radius, paramGreen2, paramBg2);
				drawRingProgress(paper2, 20.6, 0, 100, 400, 150, radius, paramYellow2, paramBg2);
				drawRingProgress(paper2, 9.0, 0, 100, 560, 150, radius, paramPink2, paramBg2);

			})
			
		</script>
	</body>

</html>